<template>
  <view class="member-center">
    <view class="user-info-card">
      <image
        class="avatar"
        :src="avatar || '/static/images/dog_logo.jpg'"
        mode="aspectFill"
      ></image>
      <view class="info">
        <view class="nickname">{{ nickname || "微信用户" }}</view>
        <view class="uid">ID: {{ uid || "N/A" }}</view>
      </view>
    </view>

    <view class="action-list">
      <view class="action-item" @click="gotoDogGroup">
        <text class="icon">🐶</text>
        <text class="text">我的狗圈</text>
        <text class="arrow">›</text>
      </view>
      <view class="action-item" @click="gotoMyBath">
        <text class="icon">🧴</text>
        <text class="text">我的沐浴露</text>
        <text class="arrow">›</text>
      </view>
      <view class="action-item" @click="gotoMyGift">
        <text class="icon">🎁</text>
        <text class="text">我的礼包卡</text>
        <text class="arrow">›</text>
      </view>
      <view class="action-item" @click="gotoMyWeight">
        <text class="icon">⚖️</text>
        <text class="text">我的会员权重</text>
        <text class="arrow">›</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useUserStoreHook } from "@/store/user";

const avatar = ref("");
const nickname = ref("");
const uid = ref("");

const gotoDogGroup = () => {
  uni.navigateTo({ url: "/pages/dog/groups/index" });
};
const gotoMyBath = () => {
  uni.navigateTo({ url: "/pages/dog/myl/index" });
};
const gotoMyGift = () => {
  uni.navigateTo({ url: "/subpages/gift/my-gift" });
};
const gotoMyWeight = () => {
  uni.navigateTo({ url: "/pages/dog/weight/index" });
};
const handleAction = (action: string) => {
  uni.showToast({
    title: "功能开发中...",
    icon: "none",
  });
};

onLoad(async () => {
  await useUserStoreHook().getSign();
  avatar.value = uni.getStorageSync("user_avatarUrl");
  nickname.value = uni.getStorageSync("user_nickName");
  uid.value = uni.getStorageSync("user_id");
});
</script>

<style lang="scss" scoped>
.member-center {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, #f7f7f7 60%, #e6f3e6 100%);
  padding-top: 40rpx;
}

.user-info-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 48rpx 36rpx;
  margin: 0 36rpx 36rpx 36rpx;
  border-radius: 28rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 36rpx;
    border: 4rpx solid #e6f3e6;
    background: #f7f7f7;
  }
  .info {
    .nickname {
      font-size: 38rpx;
      font-weight: bold;
      color: #222;
    }
    .uid {
      font-size: 26rpx;
      color: #aaa;
      margin-top: 12rpx;
    }
  }
}

.action-list {
  margin: 0 36rpx;
  background-color: #fff;
  border-radius: 28rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  .action-item {
    display: flex;
    align-items: center;
    padding: 44rpx 36rpx;
    border-bottom: 1rpx solid #f0f0f0;
    font-size: 34rpx;
    color: #333;
    transition: background-color 0.2s;
    &:last-child {
      border-bottom: none;
    }
    &:active {
      background-color: #f5f5f5;
    }
    .icon {
      margin-right: 32rpx;
      font-size: 44rpx;
    }
    .text {
      flex: 1;
      font-weight: 500;
    }
    .arrow {
      color: #ccc;
      font-size: 44rpx;
    }
  }
}
</style>
